<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>用户登录</title>
  <link rel="stylesheet" href="{{ url_for('static',filename='/css/adminlte.min.css') }}">
  <script src="{{ url_for('static',filename='plugins/jquery/jquery.min.js') }}"></script>
</head>
<body class="hold-transition register-page">
<div class="register-box">
  <div class="register-logo">
    <b>用户登录
  </div>
  <div class="card">
    <div class="card-body register-card-body">
      <form action="{{ url_for("users.login") }}" method="post">
        {{ form_obj.csrf_token  }}
        <div class="input-group mb-3">
          <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
        </div>
        <div class="input-group mb-3">
          <input type="password" class="form-control" id="password" name="password" placeholder="密码">
        </div>
        <div class="row">
          <div class="col-8">
            <label for="agreeTerms" id="info">
             </label>
          </div>
          <div class="col-4">
            <input id="register" type="submit" class="btn btn-success" value="登录">
          </div>
            {{ info }}
        </div>
      </form>
    </div>
  </div>
</div>
<script>
    $("#register").click(function () {
        $.ajax({
            url: "/users/ajax_login_data/", //后端请求地址
            type: "POST", //请求方式
            data: {//请求参数
                username: $("#username").val(),
                password: $("#password").val(),
                "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()
            },
            //请求成功后操作
            success: function (data) {
              $("#info").html(data.msg)
            },
            //请求失败后操作
            error: function (jqXHR, textStatus, err) {
                console.log(arguments);
            },
        })
    })
</script>
</body>
</html>